﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>摄像头偏移检测</title>
    <link rel="icon" href="/static/images/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="/static/css/bootstrap.css">
    <link rel="stylesheet" href="/static/css/comon0.css">

</head>
<body id="html_body">
<div class="head">
    <h1>摄像头偏移检测</h1>
</div>
<div class="mainbox">

    <div id="img_show_table"
         style="display: none;position: fixed;width:65% ;height: auto;left: 0;right: 0;margin: 0 auto;z-index:9999"
         class=" boxall">
        <div class="tit01" id="img_show_ip"></div>
        <div class="boxnav nav01">
            <div class="listhead listhead1">
                <span>原图像</span>
                <span>偏移后图像</span>
            </div>
            <div class="listnav listnav1 scrollDiv">
                <ul>
                    <li>
                            <span style="height: auto">
                                <img id="origin_img" src="">

                            </span>
                        <span style="height: auto">
                                <img id="offset_img" src="">
                            </span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="boxfoot"></div>
    </div>
    <div id="offset_record_table"
         style="display: none;position: fixed;width:65% ;height: 80%;left: 0;right: 0;margin: 0 auto;z-index:9999"
         class=" boxall">
        <div class="tit01" id="img_show_ip"></div>
        <div class="boxnav nav01" -webkit-scrollbar="display: none;" style="overflow-y: auto;">
            <div class="listhead listhead1">
                <span>序号</span>
                <span>IP</span>
                <span>偏移日期</span>
                <span>回正日期</span>
            </div>
            <div class="listnav listnav1 scrollDiv">
                <ul id="offset_record_list">
                </ul>
            </div>
        </div>
        <div class="boxfoot"></div>
    </div>
    <div id="camera_info" style="height: 90%;" class="boxall">
        <div class="tit01">Camera Information</div>
        <div class="boxnav nav03" style="overflow-y: auto;">

            <div class="listhead listhead1">
                <span>序号</span>
                <span>IP地址</span>
                <span>具体位置</span>
                <span>工作状态</span>
                <span>偏移状态</span>
                <span>偏移日期</span>
                <span style="width: 121%">操作</span>
            </div>
            <div class="listnav listnav1 scrollDiv">
                <ul id="camera_info_list">
                    {% for camera in all_camera_ip %}
                        <li><span>{{ camera.0 }}</span> <span>{{ camera.1 }}</span><span class="work_status">正常运行</span>
                            <span id="{{ camera.1 }}">无偏移</span>
                            <span>--</span>
                            <span>
                                <span style="width: 28%; height: 70%; font-size: small" disabled
                                      class="btn btn-primary show_img"
                                      img_path="">查看偏移图像</span>
                                <span style="margin-left: 20px;width: 20%; height: 70%; font-size: small"
                                      class="btn btn-primary show_offset_record"
                                      img_path="">偏移记录</span>
                                <span camera_ip="{{ camera.1 }}"
                                      style="margin-left: 20px;width: 25%; height: 70%; font-size: small"
                                      class="btn btn-primary reset_camera">重置摄像头</span>
                            </span></li>
                    {% endfor %}


                </ul>
            </div>

        </div>
        <div class="boxfoot"></div>
    </div>

    <!-- Split button -->
    <div style="margin-left: 15px" class="btn-group dropup">
        <button type="button" id="show_selected_region" class="btn btn-primary">当前区域：ALL</button>
        <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
                aria-expanded="false">
            <span class="caret"></span>
            <span class="sr-only">Toggle Dropdown</span>
        </button>
        <ul class="dropdown-menu">
            <li class="bg-primary select_region"><a>ALL</a></li>
            <li role="separator" class="divider"></li>
            <li class="bg-primary select_region"><a>C 区</a></li>
            <li role="separator" class="divider"></li>
            <li class="bg-primary select_region"><a>D 区</a></li>
            <li role="separator" class="divider"></li>
            <li class="bg-primary select_region"><a>E 区</a></li>
            <li role="separator" class="divider"></li>
            <li class="bg-primary select_region"><a>G 区</a></li>
        </ul>
    </div>
</div>
{#<audio id="myaudio" src="/static/audio/1.wav"  controls="controls" loop="loop"#}
{#       preload="preload" muted="muted">#}
{#    不支持audio标签#}
{#</audio>#}

<script type="text/javascript" src="/static/js/jquery.js"></script>
<script type="text/javascript" src="/static/js/jquery.cookie.js"></script>
<script type="text/javascript" src="/static/js/index.js"></script>
<script type="text/javascript" src="/static/js/bootstrap.js"></script>
<script type="text/javascript">
    /*
    var audio;

    function voicePaly() {
        audio = "/static/audio/1.wav";
        audio = new Audio(audio);
        // 循环播放，播放结束继续播放
        $(audio).unbind("ended").bind("ended", function () {
            audio.play();
        })
        audio.play();
    }

    function voiceClose() {
        audio.pause();
    }
*/
    // 选择摄像头区域后列表内容信息填充
    $('.select_region').click(function () {
        let selected_region = $(this).children().text()
        $.cookie("current_region", selected_region.replace(' 区', ''))
        $('#camera_info_list').empty()

        $.post('/show_data/', {'region': selected_region}, function (res) {
            for (let i in res.all_camera_ip) {
                $('#camera_info_list').append('<li><span>' + res.all_camera_ip[i][0] + '</span> <span>' + res.all_camera_ip[i][1]
                    + '</span><span class="work_status">正常运行</span><span id="' + res.all_camera_ip[i][1] + '">无偏移</span>' +
                    '<span>--</span><span><span style="width: 28%; height: 70%; font-size: small" disabled class="btn btn-primary show_img"'
                    + 'img_path="">查看偏移图像</span><span style="margin-left: 20px;width: 20%; height: 70%; font-size: small" ' +
                    'class="btn btn-primary show_offset_record" img_path="">偏移记录</span>' +
                    '<span camera_ip="' + res.all_camera_ip[i][1] + '" style="margin-left: 20px;width: 25%; height: 70%; font-size: small" ' +
                    'class="btn btn-primary reset_camera">重置摄像头</span></span></li>')
            }
        })
        $('#show_selected_region').text('当前区域：' + selected_region)
        console.log(selected_region)
    })
</script>

</body>
</html>
